<template lang="pug">
.list
  .top <!--搜索区域-->
    .search
      el-input(class="icon-search" placeholder="品牌名称/注册商标号" clearable prefix-icon="el-icon-search" v-model="searchString" @change="changeSearch")
    .select
      el-select(placeholder="品牌审核状态" clearable prefix-icon="el-icon-search" v-model="status" @change="changeStatus") 
          el-option(label="待审核", value="1")
          el-option(label="审核不通过", value="3") 
          el-option(label="审核通过", value="2")   
    .set
      el-button(class="add" type="primary" size="small" @click="toAuditList") 审核列表 
        i(class="icon-chakangengduo")
      el-button(class="el-icon-setting" size="small" @click="settingHeader") 

  .table <!--表格区域-->
    el-table(
      height="100%"
      :data="tableData"
      :header-cell-style="{ fontSize: '14px', color: '#64698F', background: '#F8F7FC' }"
      border
      style="width: 100%"
      v-loading="loading"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(v-if="currentList.length" fixed type="index" width="55" align="center" label="序号")
      el-table-column(
        v-for="item, index in currentList"
        :key="index"
        :label="item.name"
        :min-width="item.minWidth"
        :sortable="item.sortable"
        :align="item.align"
        :prop="item.key"
        align="center"
      )
        template(slot-scope="scope")           
          .table-item-bd.flex.click(v-if="item.key === 'companyName'" @click="viewBrand(scope.row)")
            .brandView {{scope.row[item.key]}}             
          .table-item-bd.flex.click(v-else-if="item.key === 'isImport'")
            .table-item-isImport(v-if="scope.row.isImport == 1") 进口 
            .table-item-isImport(v-if="scope.row.isImport == 2") 国产
          .table-item-bd.flex.click(v-else-if="item.key === 'logoUrl'" @click="logoPerview(scope.row)")
            .table-item-perview 预览 
          .table-item-bd.flex.click(v-else-if="item.key === 'certificate'" @click="perview(scope.row)")
            .table-item-perview 预览 
          .table-item-bd(v-else-if="item.key === 'reviewStatus'")
            .table-item-status(v-if="scope.row.reviewStatus == 1")
              label.status-point.normal
              span 待审核
            .table-item-status(v-if="scope.row.reviewStatus == 2")
              label.status-point.success
              span 审核通过
            .table-item-status(v-if="scope.row.reviewStatus == 3")
              label.status-point.warning
              span 审核不通过                    
          .table-item-bd(v-else-if="item.key === 'createDate'") {{scope.row[item.key] | filterDate}}  
          .table-item-bd(v-else-if="item.key === 'handle'" fixed="right")
            .table-item-handle
              .table-item-btn.info(align="center" @click="delBrand(scope.row)" v-if="$permission('AB-03002-002')") 删除
          .table-item-text(v-else) {{scope.row[item.key]}}

  view-brand-model(
    :audit="audit" 
    :show="showDialog" 
    :item="currentItem" 
    @close="closeModal" 
    @confirm="confirmModal"
    @failer="failerModal"
  )
  //- 自定义列表
  set-table-header(
    :show="showDialogBrand"
    :allHeaderList="allHeaderList"
    :defaultList="defaultList"
    :currentList="currentList"
    :filterHeaders="filterHeaders"
    type="4"
    @close="closeDialog"
    @confirm="confirmDialog"
  )  
  .index-pagination <!--分页区域-->
    .pagination-total 共 {{ total }} 条
    .pagination-sizes 20 条/页
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
    )

</template>

<script>
import { loadSupplierBrands,getTableMenu,loadCertificatePic,batchAudit,deleteSupplierBrand,getSupplierBrandInformation, } from 'api'
import viewBrandModel from '@/components/modal/viewBrandModel'
import setTableHeader from '@/components/modal/setTableHeader'
import { mapActions } from 'vuex'
export default {
  name: 'brandList',
  components: {
    viewBrandModel,
    setTableHeader
  },
  data () {
    return {
      total:0,
      currentPage: 1,
      pageSize:20,
      reviewStatus:1,
      searchString: '',
      status: '',
      tableData:[],
      logoUrl:'',
      list: [],
      loading: false,
      showDialog:false,
      currentItem: {},
      audit:{
        title:'',
        auditFailer:'审核失败',
        auditSuccess:'审核通过',
        sure:'确定',
        reviewStatus:1
      },
      showDialogBrand:false,
      allHeaderList: [
        // { name: "代理公司", key: 'companyName' },
        // { name: "操作", key: 'handle' },
        { name: "产地", key: 'isImport' },
        { name: "品牌名称", key: 'name' },
        { name: "品牌公司", key: 'brandCompany' },
        { name: "负责人", key: 'personsInChargeOfCompany' },
        { name: "联系方式", key: 'personsInChargeOfCompanyPhone' },
        { name: "LOGO", key: 'logoUrl' },
        { name: "证件附件", key: 'certificate' },
        { name: "审核状态", key: 'reviewStatus' },
        { name: "申请时间", key: 'createDate' },
        { name: "已关联材料数", key: 'materialAmount',sortable: true }
      ],
      filterHeaders: ['companyName', 'handle'],
      defaultList: [
        { name: "代理公司", key: 'companyName', isDisable: true, minWidth: 100 },
        { name: "产地", key: 'isImport' },
        { name: "品牌名称", key: 'name' },
        { name: "品牌公司", key: 'brandCompany' },
        { name: "负责人", key: 'personsInChargeOfCompany' },
        { name: "联系方式", key: 'personsInChargeOfCompanyPhone' },
        { name: "LOGO", key: 'logoUrl' },
        { name: "证件附件", key: 'certificate' },
        { name: "审核状态", key: 'reviewStatus' },
        { name: "申请时间", key: 'createDate',sortable: true },
        { name: "操作", key: 'handle', isDisable: true }
      ],
      currentList:[],
    }
  },
  methods:{
    ...mapActions([
      'changePreviewModal',
      'changeCarousel'
    ]),
    // 搜索
    changeSearch () {
      this.currentPage = 1
      this.getBrandList()
    },
    // 审核状态
    changeStatus () {
      this.currentPage = 1
      this.getBrandList()
    },
    settingHeader () {
      this.showDialogBrand = true
    },
    // 关闭自定义列表弹框
    closeDialog () {
      this.showDialogBrand = false
    },
    confirmDialog () {
      this.showDialogBrand = false
      this.getTableMenu()
    },
    async getBrandList () {
      try {
        this.loading = true
        let query = { ...this.$route.query }
        query.currentPage = this.currentPage
        query.pageLines = this.pageSize
        if (this.searchString) query.searchString = this.searchString
        if (this.status) query.reviewStatus = Number(this.status)
        // const { ResultSet } = await this.$axios.post(getBrandList)
        const { ResultSet } = await this.$axios.post(loadSupplierBrands, { ...query })
        this.tableData = ResultSet.userData.loadBrandList
        this.total=ResultSet.recordNumber
        this.loading = false
      
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getTableMenu () {
      try {
        this.loading = true
        const { ResultSet } = await this.$axios.post(getTableMenu, { type: 4 })
        this.currentList = ResultSet.userData.data ? JSON.parse(ResultSet.userData.data) : this.defaultList
        await this.getBrandList()
      } catch (err) {
        this.loading = false
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async init () {
      await this.getTableMenu()
    },

    handleCurrentChange(val) {
      this.currentPage= val
      this.getBrandList()
    },

    // logo预览
    logoPerview (row) {
      this.changePreviewModal({
        show: true,
        url: row.logoUrl
      })
    },
    // 证书预览
    perview (row) {
      console.log(row)
      if (!row.certificateList.length) {
        this.$message.error('该品牌还没有上传证件附件！')
        return
      }
      this.changeCarousel({ list: row.certificateList, show: true })
    },
    toAuditList(){
      this.$router.push({ name: 'auditList' })
    },
    // 品牌审核
    viewBrand (row) {
      console.log(row)
      this.showDialog = true 
      this.currentItem = row
    },
    // 关闭品牌审核弹框
    closeModal () {
      this.showDialog = false
      this.currentItem = {}
    },
    confirmModal () {
      this.showDialog = false
      this.currentItem = {}
      this.getBrandList()
    },
    failerModal () {
      this.showDialog = false
      this.getBrandList()
    },
     //删除单条数据
    delBrand(row){
      this.$confirm('是否删除该品牌？删除后所有关联材料将会下架', '提示').then(async () => {
        try {
          await this.$axios.post(deleteSupplierBrand, { idList: row.supplierBrandId })
          this.$message.success('删除成功');
          this.getBrandList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
  },
  beforeRouteEnter (to, from, next) {
      // ...
    next(vm => {
      // vm.initFilter()
      vm.init()
      vm.getBrandList()   
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getBrandList()
    this.init()
    this.initFilter()
  },
  
} 
</script>

<style lang="scss" scoped>
  .list {
    height: 100%;
    width: 100%;
    padding: 0 40px;
    background: #FFFFFF;
    border: 1px solid #F3F3F4;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #F3F3F4;
    border-radius: 10px;
  }
  // .cont{
  //   height: 100%;
  //   padding:0;
  // }
  .title{
    margin-top: 15px;
    margin-bottom:15px;
    color:#B2B4C7;
  }
  .top{
    width:100%;
    height:40px;
    margin-top:16px;
    margin-bottom:16px;
    position: relative;
    display:flex;
    align-items: center;  
    .icon-search{
      cursor: pointer;
    } 
    .select{
      margin-left:16px;
    }
    .set{
      float:right;
      position: absolute;
      right:0;
      .add{
        width: 96px;
        height: 32px;
        background: #FF708B;
        border-radius: 6px;
        color:#fff;
      }
      .icon-Search{
        cursor: pointer;
      }
      .icon-setting:before{
        margin-right:5px;
      }
      .setting{
        width: 46px;
        height: 32px;
        line-height:32px;
        text-align:center;
        margin-left:15px;
        color:#C4C4C4;
        background: #F6F6F9;
        border-radius: 6px;
      }
    }
  }
  .table{
    height: calc(100% - 150px);
    el-table-column{
      text-align:center;      
    }
    .el-table .el-table__cell{
      text-align:center;
    }
    .brandView{
      color:#FF2E42;
      cursor: pointer;
    }
  }
  .table-item-status {
    display: flex;
    align-items: center;
    justify-content: center;
    .status-point {
      position: relative;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 4px;
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        transform: translate(-50%, -50%);
      }
      &.success {
        background: rgba(48, 217, 135, .5);
        &:before {
          background: #30D987;
        }
      }
      &.warning {
        background: rgba(251, 177, 66, .5);
        &:before {
          background: #FBB142;
        }
      }
      &.normal {
        background: rgba(134, 118, 255, .5);
        &:before {
          background: #8676FF;
        }
      }
    }
  }
  .index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
}
.table-item-perview{
  cursor: pointer;
  color:#FF2E42;
}
.table-item-bd {
  &.click {
    cursor: pointer;
  }
  .table-item-head {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    margin-right: 8px;
  }
  .table-item-name {
    font-size: 14px;
    line-height: 22px;
    color: #FF2E42;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.table-item-handle {
  display: flex;
  .table-item-btn {
    margin-right: 8px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 6px;
    cursor: pointer;
    &.warning {
      background: #FDEFF1;
      color: #FF2E42;
    }
    &.normal {
      background: #F3F0FF;
      color: #7362F0;
    }
    &.info {
      background: #F6F6F9;
      color: #3E4373;
    }
  }
}
</style>
